<template>
  <div>
      <WelTop active='attentionTab'></WelTop>
      <div class="container">
        <div class="tipBox" v-show="!isLogin[userId]">
            <div class="tipWrap">
                <div class="jdTip"></div>
                <div class="tipMessage">登录后可查看关注门店的优惠信息~</div>
                <router-link to='/login' class="tipBtn">立即登录</router-link>
            </div>
        </div>
        <div :class="['content',isLogin[userId]==true?'content1':'']">
            <div class="scrollBox">
                <p class="nearHot" v-show="!isLogin[userId]">附近热门动态</p>
                <div class="list">
                    <div class="item" v-for="val in itemArry" :key="val.id">
                        <div class="shop">
                            <img class="shopImg" :src="imgUrl+val.arry">
                            <div class="shopName">
                                <div class="name">{{val.name}}</div>
                                <div class="time">{{val.time}}</div>
                            </div>
                            <div class="attBtn" v-show="!isLogin[userId]">关注</div>
                        </div>
                        <div class="title">{{val.title}}</div>
                        <div class="pics">
                            <div class="imgs" v-for="(imgs,index) in val.imgsArry" :key='index+val.id'>
                                <img :src="imgUrl+imgs.pics">
                                <div class="price">￥{{imgs.newPrice}}<del>￥{{imgs.oldPrice}}</del></div>
                                <div :class="['ticket',imgs.ticket.tClass]">{{imgs.ticket.tTxt1}}{{imgs.ticket.discount}}{{imgs.ticket.tTxt2}}{{imgs.ticket.rid}}</div>
                                <div :class="['mask',imgs.maskClass==true?'':'notMask']">已抢光</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
      <AppFooter active='welfareTab'></AppFooter>
  </div>
</template>

<script>
import WelTop from '@/components/WelTop'
import $ from 'jquery'
export default {
    data(){
        return {
            itemArry:[],
        }
    },
    computed:{
        userId(){
            for(let key in this.isLogin){
                if(this.isLogin[key]){
                    return key;
                }
            }
        }
    },
    created(){
        this.getItemArry();
    },
    methods:{
        getItemArry(){
            this.axios.get('/itemarry').then((ret)=>{
                let {data,error}=ret.data;
                this.itemArry=data;
            }).catch(()=>{})
        }
    },
    components:{
        WelTop
    }
}
</script>

<style scoped lang='scss'>
.container{
    background-color: #f8f8f8;
    .content{
        .scrollBox{
            .nearHot{
                margin: 70px 23px 35px;
                color:#333;
                font-weight: 700;
                font-size: 46px;
                line-height: 56px;
            }
            .list{
                padding: 0 23px;
                .item{
                    position: relative;
                    margin: 23px 0;
                    background-color: #fff;
                    padding: 37px 23px;
                    border-radius: 18px;
                    .shop{
                        display: flex;
                        justify-content: space-around;
                        .shopImg{
                            width: 93px;
                            height: 93px;
                            border:2px solid rgba(0,0,0,.08);
                            border-radius: 93px;
                        }
                        .shopName{
                            width: 379px;
                            padding-left: 23px;
                            .name{
                                height: 46px;
                                font-size: 32px;
                                line-height: 46px;
                                color: #333;
                            }
                            .time{
                                height: 35px;
                                font-size: 28px;
                                line-height: 35px;
                                color: #999;
                                margin-top: 7px;
                            }
                        }
                        .attBtn{
                            background: #47b34f;
                            width: 154px;
                            height: 61px;
                            font-size: 28px;
                            color:#fff;
                            line-height: 52px;
                            text-align: center;
                            border-radius: 30px;
                        }
                    }
                    .title{
                        margin-top: 11px;
                        line-height: 56px;
                        font-size: 37px;
                        color: #333;
                    }
                    .pics{
                        margin-top: 23px;
                        display:flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        .imgs{
                            width: 208px;
                            height: 208px;
                            border: 2px solid #f8f8f8;
                            border-radius: 9px;
                            position: relative;
                            overflow: hidden;
                            img{
                                width: 100%;
                                height: 100%;
                            }
                            .price{
                                position: absolute;
                                left: 0;
                                bottom: 0;
                                right: 0;
                                height: 61px;
                                line-height: 61px;
                                background: hsla(0,0%,100%,.9);
                                padding-left: 11px;
                                font-size: 32px;
                                color: #ff5757;
                                del{
                                    padding-left: 11px;
                                    font-size: 28px;
                                    color: #999;
                                }
                            }
                            .ticket{
                                position: absolute;
                                top: 0;
                                left: 0;
                                color: #fff;
                                font-size: 23px;
                                height: 32px;
                                line-height: 32px;
                                text-align: center;
                                z-index: 1;
                                margin-right: 7px;
                                padding: 0 7px;
                                border-radius: 9px 2px;
                            }
                            .orange{
                                background: -webkit-linear-gradient(left top, rgb(255, 200, 55), rgb(255, 150, 51));
                            }
                            .red{
                                background:-webkit-linear-gradient(left top, rgb(255, 125, 125), rgb(255, 81, 56));
                            }
                            .green{
                                background:-webkit-linear-gradient(left top, rgb(85, 216, 94), rgb(72, 193, 81));
                            }
                            .mask{
                                position: absolute;
                                top: 0;
                                left: 0;
                                right: 0;
                                bottom: 0;
                                border-radius: 9px;
                                text-align: center;
                                color:#fff;
                                font-weight: 700;
                                font-size: 42px;
                                background-color: rgba(0,0,0,0.3);
                                z-index: 1;
                                line-height: 208px;
                            }
                            .notMask{
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }
    .content1{
        padding-top: 117px;
    }
    .tipBox{
        height: 609px;
        position: relative;
        margin: 23px;
        border-radius: 18px;
        overflow: hidden;
        .tipWrap{
            width: 100%;
            height: 100%;
            padding: 0 0 58px;
            text-align: center;
            z-index: 1000;
            background: #fff;
            .jdTip{
                background:url(/static/home/cad7c230.png) 50% no-repeat;
                background-size: cover;
                width: 375px;
                height: 375px;
                margin: 0 auto;
            }
            .tipMessage{
                margin-top: 23px;
                font-size: 32px;
                color:#3c3c3c;
                line-height: 1.4;
            }
            .tipBtn{
                text-decoration: none;
                display: inline-block;
                margin: 35px auto 0;
                padding: 0 35px;
                height: 75px;
                line-height: 70px;
                border-radius: 46px;
                font-size: 32px;
                background: #47b34f;
                color:#fff;
            }
        }
    }
}
</style>

